<template>
  <div class="home-wrap">
    <ul class="home-order">
        <li>
            <img src="images/list_03.jpg" alt="">
            全部订单
        </li>
        <li>
            <img src="images/list_05.jpg" alt="">
            待付款
        </li>
        <li>
            <img src="images/list_07.jpg" alt="">
            未出行
        </li>
        <li>
            <img src="images/list_09.jpg" alt="">
            待评价
        </li>
    </ul>
    <ul class="home-list">
        <li class="list-first">
            <img src="images/li_03.jpg" alt="">
            <div class="title">
                我的钱包   <span style="color:red;" class="tit">待认证></span>
                <em>
                    "礼品卡￥0.0" &nbsp; | &nbsp;"现金￥0.0"&nbsp; | &nbsp;"返现￥0.0"

                </em>
            </div>
        </li>
        <li>
            <img src="images/li_07.jpg" alt="">
            优惠券
            <i>1张</i>
        </li>
        <li>
            <img src="images/li_09.jpg" alt="">
            积分
            <i>0分</i>
        </li>
       <li>
            <img src="images/li_11.jpg" alt="">
            拿去花
            <i>立即开通</i>
        </li>
    </ul>
    <ul class="home-card">
        <li>
            常用信息 <i>旅客/地址/发票抬头 ></i>
        </li>
        <li>
            我的收藏 <i>降价产品有提醒 ></i>
        </li>
        <li>
            浏览历史 <i>近15天访问记录 ></i>
        </li>
        <li>
            我要合作 <i>供应商加盟代理合作 ></i>
        </li>
    </ul>
    <ul class="row">
        <li>
            <img src="images/foot_03.jpg" alt="">
            <p>航班助手</p>
        </li>
         <li>
            <img src="images/foot_05.jpg" alt="">
            <p>我的特权</p>
        </li>
       <li>
            <img src="images/foot_07.jpg" alt="">
            <p>一生旅行</p>
        </li>
         <li>
            <img src="images/foot_09.jpg" alt="">
            <p>更多</p>
        </li>
    </ul>
    <div class="foot">

    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style  scoped>
.home-wrap{
    width: 100%;
     background: #f5f5f5;
     z-index: 5;
}
.home-order{
    margin-top: .3rem;
    margin-bottom: .1rem;
    color: #333;
    display: flex;
    background-color: #fff;
}
.home-order li{
    width: 25%;
    font-size: .13rem;
    text-align: center;
    padding: .15rem 0;
}
.home-order li img{
    display: block;
    width: .42rem;
    margin-left: .26rem;
    height: .32rem;
    margin-bottom: .1rem;
}
.home-list{
    height: 1.46rem;
    color: #333;
    margin-bottom: .1rem;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 0;
}
.home-list .list-first{
    width: 100%;
    height: .73rem;
    padding-top: .1rem;
    margin-left: 16px;
    font-size: 16px;
}
.list-first .title{
    float: right;
    text-align: left;
}
.list-first .title span{
    font-size: .12rem;
}
.list-first .title em{
    margin-top: .1rem;
    color: gray;
    font-style: normal;
    font-size: .12rem;
    display: block;
}
.list-first .title .tit{
    margin-left: 2rem;
    padding-right: .1rem;
}
.home-list li{
    width: 33%;
    text-align: center;
    padding: .15rem 0;
    font-size: .15rem;
    height: .73rem;
    border-right: .01rem solid #e5e5e5;
}
.home-list li i{
    margin-top: .05rem;
    display: block;
    font-style: normal;
    color: gray;
    font-size: .1rem;
}
.home-list li img{
    width: .25rem;
    height: .25rem;
    vertical-align: top;
}
.home-card{
    width: 100%;
    background-color: #fff;
    margin-bottom: .1rem;
}
.home-card li{
    height: .49rem;
    line-height: .49rem;
    margin-left: .16rem;
    font-size: .16rem;
    border-bottom: .01rem solid #e5e5e5;
}
.home-card li i{
    font-style: normal;
    float: right;
    color: #999;
    font-size: .13rem;
    margin-right: .1rem;
}
.row{
    width: 100%;
    padding: .2rem 0;
    display: flex;
    background-color: #fff;
}
.row li{
    width: 25%;
    height: .66rem;
    text-align: center;
    font-size: .14rem;
}
.foot{
    width: 136px;
    height: 0;
    padding-top: 21px;
    background: url(//pic.c-ctrip.com/platform/h5/my/home/slogan.png) 0 0 no-repeat;
    background-size: 136px auto;
    overflow: hidden;
    margin: 0px auto;
    margin-top: .4rem;
    margin-bottom: .3rem;
}

</style>